<template>
  <div class="shop_index">
    <el-container>
      <el-header><top-bar></top-bar></el-header>
      <el-main>
        <top-category  @categoryItemEvent="categoryItemClick"></top-category>
      </el-main>
      <router-view></router-view>
    </el-container>
  </div>
</template>

<script>
  import TopBar from "components/topBar/TopBar";
  import TopCategory from "components/topCategory/TopCategory";
  import {request} from "network/request";
  import {product} from "network/product";
  import BottomBar from "components/bottomBar/BottomBar";

  export default {
    name: "index",
    data(){
      return{
        //存储分类信息
        categoryList: [],
        //存储商品列表(对用分类id)
        productListInfo: [],
      }
    },
    components:{
      TopBar,
      TopCategory,
      BottomBar
    },

    created() {
      let that = this;
      //1. 在创建index的页面的时候，就会发送分类请求， 将获得的分类信息传递给子组件 TopCategory
      request({
        url: '/category'
      }).then(res => {
        that.categoryList = res.data.data; //将分类信息存储到data数据上
      })
    },

    methods:{
      //根据TooCategory子组件点击 传递过来的数据
      categoryItemClick(categoryItem){
        let that = this;
        //发送网络请求： localhost:12345/product/getProductByCategoryId?categoryId=categoryItem
        product({
          url: '/product/getProductByCategoryId',
          params: {
            categoryId: categoryItem.categoryId
          }
        }).then(res => {
          //返回 ProductListInfo
          this.productListInfo = res.data.data;
        })
      }
    }
  }
</script>

<style scoped>

</style>
